<script setup>
import { onMounted, ref } from 'vue';
import luckysheet from "luckysheet";
import LuckyExcel from 'luckyexcel';
import Index from "@/components/analysisSheetComponents/ambientAir/tmpl70/index.vue";
import {useAnalysetStore} from "@/store/index.ts";
import {transCdata, processTableData} from "@/utils/method";
import {getUserInfo} from "@/utils/auth.ts";
import dayjs from "dayjs";
import AnalyesAPI from "@/api/system/analyes.ts";

const switchAB = ref(true)
const sheetData = ref('')
const jsonData = ref(null)
const analyseStatusPage = useAnalysetStore()
const processedData = ref([])
const cdatas = ref([])


var options = {
  container: "luckysheet", //luckysheet为容器id
  lang: 'zh',
  autoCalculate: true,
  data: [
    {
      "name": "", // 工作表名称
      "color": "", // 工作表颜色
      "index": 0, // 工作表索引
      "status": 1, // 激活状态
      "order": 0, // 工作表的下标
      "column": 6, // 列数
      "defaultRowHeight": 30, // 自定义行高
      "defaultColWidth": 100, // 自定义列宽
      "celldata": [
        // 初始化表格数据，第一行包含表头
        { "r": 0, "c": 0, "v": "样品编号", }, // A1
        { "r": 0, "c": 1, "v": "类型", }, // A1
        { "r": 0, "c": 2, "v": "稀释倍数f", }, // B1
        { "r": 0, "c": 3, "v": "毫伏值E(  )", }, // B1
        { "r": 0, "c": 4, "v": "样品含量m(  )", }, // B1
        { "r": 0, "c": 5, "v": "m-m0(  )", }, // B1
        { "r": 0, "c": 6, "v": "参比体积V0（ ）", }, // B1
        { "r": 0, "c": 7, "v": "样品浓度ρ（  ）", }, // B1
        { "r": 0, "c": 8, "v": "测定结果", }, // B1
        { "r": 0, "c": 9, "v": "备注", }, // B1
        
      ], // 初始化数据
      "config": {
       // 合并单元格
        "columnlen": { // 设置列宽
          "0": 130, // 第一列宽度 150px
          "1": 130, // 第二列宽度 120px
          "2": 130, // 第三列宽度 180px
          "3": 130, // 第四列宽度 100px
          "4": 100, // 第五列宽度 200px
          "5": 100,  // 第六列宽度 150px
          "6": 100,  // 第六列宽度 150px
          "7": 100,  // 第六列宽度 150px
          "8": 100,  // 第六列宽度 150px
          "9": 100,  // 第六列宽度 150px
        }, // 表格列宽
      },
    }
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};
const tableOption = ref([
  { table: '仪器名称', id: 1, }
])

const waterForm = ref({
  bdatas: {
    qxhzdatas: {},
    qxjhdcd: [
      {ypbh: '', cdjg: '', xd: '', zkyq: '', sfhg: ''},
      {ypbh: '', cdjg: '', xd: '', zkyq: '', sfhg: ''},
    ],
    pxycd_fx: {},
  },
  kbycd: [
    {kb_ypbh: '', kb_xgd: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_xgd: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_xgd: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_xgd: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''}
  ],
  pxycd: [],
  bzycd: [
    {bz_ypph: '', bz_cdnd: '', bz_bzz: '', bz_sfhg: ''},
    {bz_ypph: '', bz_cdnd: '', bz_bzz: '', bz_sfhg: ''},
    {bz_ypph: '', bz_cdnd: '', bz_bzz: '', bz_sfhg: ''}
  ],
  jbycd: [
    {jb_ypbh: '', jb_bynd: '', jb_jbl: '', jb_jbhyphl: '', jb_yypgl: '', jb_hsl: '', jb_zkyq: '', jb_sfhg: ''},
    {jb_ypbh: '', jb_bynd: '', jb_jbl: '', jb_jbhyphl: '', jb_yypgl: '', jb_hsl: '', jb_zkyq: '', jb_sfhg: ''},
    {jb_ypbh: '', jb_bynd: '', jb_jbl: '', jb_jbhyphl: '', jb_yypgl: '', jb_hsl: '', jb_zkyq: '', jb_sfhg: ''},
    {jb_ypbh: '', jb_bynd: '', jb_jbl: '', jb_jbhyphl: '', jb_yypgl: '', jb_hsl: '', jb_zkyq: '', jb_sfhg: ''}
  ],
  unit: {}
})
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  // 初始化表格
  luckysheet.create(options);
//   获取表单信息
  getWaterCapacity()
});

// 获取——获取 水质容量A   工作表
const getWaterCapacity = () => {
  let josn = {
    // id: analyseStatusPage.waterForm.id,
    id: 3,
    // record_sn: record_sn,
    record_sn: 70,
  }
  AnalyesAPI.getAnalyseACapacity(josn).then(data => {
    console.log('获取水质容量 A单', data)
    // waterForm.value = data
    // sheetData.value = data.configs
    // options.data = sheetData.value
    // luckysheet.create(options);
    // processedData.value = data.adatas
  })
}

//加载本地数据
const loadDataFromLocal = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data)
  const data = options.data[0].data.map(row => {
    return row
        .map(cell => {
          return cell ? {
            field: cell.m || "默认字段",
            value: cell.v || null
          } : null;
        })
        .filter(cell => cell !== null); // 删除 null 值
  });
  console.log(data);
  // 调用函数
  processedData.value = processTableData(data);
  console.log('aghsduiahsuidhaiu', processedData.value);
  cdatas.value = transCdata(processedData.value)
  console.log(cdatas.value)
  //   调接口拿数据
AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    // record_sn: record_sn,
    record_sn: 70,
    // id: analyseStatusPage.waterForm.id,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
    cdatas: cdatas.value
  }).then(data => {
    console.log('调接口拿数据', data)
    ElMessage.success('提交成功！')
  })
}


// 保存新增表单
const handleAddWaterPh = () => {
  console.log(luckysheet.getLuckysheetfile())
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data)
  const data = options.data[0].data.map(row => {
    return row
        .map(cell => {
          return cell ? {
            field: cell.m || "默认字段",
            value: cell.v || null
          } : null;
        })
        .filter(cell => cell !== null); // 删除 null 值
  });
  console.log(data);
  processedData.value = processData(data);
  console.log(processedData.value)
};


function formatLuckysheetData(sheetData) {
  const formattedData = [];
  // 假设第一行为标题行
  const headers = sheetData[0].cells.map(cell => cell.v);
  // 遍历每一行数据（从第二行开始）
  for (let i = 1; i < sheetData.length; i++) {
    const row = sheetData[i];
    const rowData = {};
    // 将每行的数据映射到对象属性
    row.cells.forEach((cell, index) => {
      rowData[headers[index]] = cell.v;
    });

    formattedData.push(rowData);
  }

  return formattedData;
}

// 用于获取最新的表格数据
const getUpdatedData = () => {
  if (jsonData.value === null) {
    sheetData.value = luckysheet.getLuckysheetfile();
  } else {
    sheetData.value = jsonData.value.sheets[0]
  }
  // const data = formatLuckysheetData(sheetData.value)
  // console.log(data)
  const tableDataString = JSON.stringify(sheetData.value); // 将表格数据转为 JSON 字符串
  localStorage.setItem('tableData', tableDataString);
  console.log(sheetData.value); // 打印当前表格的数据
};

// 上传文件
const loadExcel = (evt) => {
  const files = evt.target.files
  console.log(files)
  if (files == null || files.length == 0) {
    alert('No files wait for import')
    return
  }
  let name = files[0].name
  let suffixArr = name.split('.'),
    suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    alert('Currently only supports the import of xlsx files')
    return
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('Failed to read the content of the excel file, currently does not support xls files!')
      return
    }
    console.log('exportJson', exportJson.sheets)
    jsonData.value = exportJson

    luckysheet.destroy()
    luckysheet.create({
      container: 'luckysheet', //luckysheet is the container id
      showinfobar: false,
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator
    })
  })
}

const handleSwitch = () => {
  switchAB.value = !switchAB.value
}
</script>

<template>
  <div class="card">
    <div v-show="switchAB">
      <el-card class="box-card">
        <h1 style="text-align: center">环境空气 离子选择电极法分析原始记录（A面）</h1>
        <div>SXLPHJ/JL/CX-22-70</div>
        <table class="table">
          <tr style="background-color: #f2f2f2">
            <td colspan="2">任务编号</td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.task_name"/>
            </td>
            <td>采样日期</td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.sampling_time"/>
            </td>
            <td colspan="1">分析日期</td>
            <td colspan="4">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.anal_time"/>
            </td>
          </tr>
          <tr>
            <td colspan="2">分析项目</td>
            <td colspan="5">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.fxxm"/>
            </td>
            <td colspan="1">检出限</td>
            <td colspan="4">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.limit_val"/>
            </td>
          </tr>
          <tr style="background-color: #f2f2f2">
            <td colspan="2">分析方法</td>
            <td colspan="8">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.method"/>
            </td>
          </tr>
          <tr>
            <td colspan="2">分析仪器</td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="waterForm.device_name"/>
            </td>
            <td>仪器型号</td>
            <td colspan="2">
              <el-input style="width: 150px;border: 1px solid transparent" placeholder="请输入"
               v-model="waterForm.device_model" />
            </td>
            <td colspan="1">仪器编号</td>
            <td colspan="4">
              <el-input style="width: 200px;border: 1px solid transparent" placeholder="请输入" 
               v-model="waterForm.device_number"/>
            </td>
          </tr>
          <tr style="background-color: #f2f2f2">
            <td colspan="2">环境温度</td>
            <td colspan="2">
              <el-input style="width: 150px;border: 1px solid transparent" placeholder="请输入"
               v-model="waterForm.temperature" /> ℃
            </td>
            <td>环境湿度</td>
            <td colspan="2">
              <el-input style="width: 150px;border: 1px solid transparent" placeholder="请输入"
               v-model="waterForm.humidity" /> %RH
            </td>
            <td colspan="1">样品类别</td>
            <td colspan="4">
              <el-input style="width: 200px;border: 1px solid transparent" placeholder="请输入" 
              v-model="waterForm.category_id"  />
            </td>
          </tr>
          <tr>
            <td colspan="2">计算公式</td>
            <td colspan="10">
              <el-input style="width: 200px;border: 1px solid transparent" 
              v-model="waterForm.js_formula" />
            </td>
          </tr>
   
        </table>
        <!--      <input id="uploadBtn" type="file" @change="loadExcel"/>-->
        <div id="luckysheet" style="width:100%;height:500px;"></div>
        <table  class="table">
        <tr style="text-align: center;">
            <td style="width: 2%;">备注</td>
            <td colspan="10">
              <el-input style="width: 200px;border: 1px solid transparent"
               v-model="waterForm.notes" />
            </td>
          </tr>
        </table>
      </el-card>
    </div>
    <div v-show="!switchAB">
      <Index :water-form="waterForm"></Index>
    </div>

    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: space-between;">
        <el-button @click="handleSwitch">
          {{ switchAB ? 'B面' : 'A面' }}
        </el-button>
        <div>
          <el-button>取消</el-button>
          <el-button>新增</el-button>
          <el-button>复制并新增</el-button>
          <el-button @click="loadDataFromLocal">保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
